<style>
  .twy-agot-city-banner-section {
    margin-top: 0;
    margin-bottom: 0;
  }
</style>
<div class="twy-agot-city-banner">
  <div class="agot-width">
    <div class="city-bg-container city-scene-container">
      <div class="scene-container__title page-width">
        <div class="scene-container__title-text title-left">
          {{ section.settings.title }}
        </div>
        <div class="scene-container__title-text title-right">
          <p class="title-item mobile-item">{{ section.settings.levle2 }}</p>
          <p class="title-item title-desc"><strong>{{ section.settings.prefix }}</strong>  <span class="title-desc__text">{{ section.settings.desc }}</span></p>
        </div>
      </div>
      <div class="city-scene-wrapper bg-image">
        <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
        >
          {%- if section.settings.image != blank -%}
            <img
              id="imageref"
              src="{{ section.settings.image | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 3 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
              alt="{{ section.settings.image.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.image.width }}"
              height="{{ section.settings.image.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
        >
          {%- if section.settings.image_mobile != blank -%}
            <img
              srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
              src="{{ section.settings.image_mobile | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
              alt="{{ section.settings.image_mobile.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.image_mobile.width }}"
              height="{{ section.settings.image_mobile.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      </div>
    </div>
 </div>
</div>

<script>
  $(window).ready(function() {
    
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }

    function initScrollMagic() {
      const AgoxController = new ScrollMagic.Controller();
      
      const tenwaysAgotImage =  document.querySelector('.city-bg-container')
      const tl = new TimelineMax();
      
      tl.fromTo(
        '.scene-container__title',
        1,
        {
          yPercent: '0'
        },
        {
          // yPercent: '150',
          top: 'auto',
          bottom: '80px',
          ease: Linear.easing,
        }
      )
      
      tl.to(
        '.city-scene-wrapper',
        1,
        {
          'paddingTop': 0,
          'paddingLeft': 0,
          'paddingRight': 0,
          ease: Linear.easing,
          'filter': 'grayscale(0%)',
          'maxWidth': '100%'
        },
        "-=1"
      )
      
      tl.fromTo(
        '.scene-container__title',
        0.8,
        {},
        {}
      )
      
      let scene1 = new ScrollMagic.Scene({
        duration: '800',
        triggerElement: tenwaysAgotImage,
        triggerHook: 0
      })
      .setTween(tl)
      .setPin(tenwaysAgotImage)
      .removeClassToggle('.page-width')
      .addTo(AgoxController); 
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( AgoxController !== null && AgoxController !== undefined ) {
          AgoxController = AgoxController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( AgoxController === null || AgoxController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
</script>

{% schema %}
  {
    "name": "Twy AGOT City Banner",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width twy-agot-city-banner-section",
    "settings": [
      {
        "type": "html",
        "id": "title",
        "label": "Title"
      }, 
      {
        "type": "html",
        "id": "levle2",
        "label": "Title levle2"
      },
      {
        "type": "html",
        "id": "prefix",
        "label": "Title desc prefix"
      },
      {
        "type": "html",
        "id": "desc",
        "label": "Title desc"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image Mobile"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "t:sections.image-with-text.settings.height.options__1.label"
          },
          {
            "value": "small",
            "label": "t:sections.image-with-text.settings.height.options__2.label"
          },
          {
            "value": "large",
            "label": "t:sections.image-with-text.settings.height.options__3.label"
          }
        ],
        "default": "adapt",
        "label": "t:sections.image-with-text.settings.height.label"
      }
    ],
    "presets": [
      {
        "name": "Twy AGOT City Banner"
      }
    ]
  }
{% endschema %}



